<template>
  <div class="padding flex height-100 content-with-tree">
    <div class="flex direction-column height-100 right-content">
      <div class="search-form">
        <el-form inline>
          <year-month-picker v-model="time" :allow-date="false"></year-month-picker>
          <el-form-item label="所属区域">
            <area-picker v-model="area"></area-picker>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input v-model="keyword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="clickSearch">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="flex-1 overflow-auto dark-table-wrapper">
        <el-table
          ref="table"
          v-loading="loading"
          :data="lists"
          height="100%"
          :header-cell-style="{
            backgroundColor: themeColor,
            color: 'white',
            textAlign: 'center'
          }"
          :cell-style="{
            textAlign: 'center'
          }"
        >
          <div slot="empty" class="empty-lists">
            <i class="i-custom:search"></i>
            <span class="empty-text">暂无数据</span>
          </div>
          <el-table-column
            v-for="(column, index) in columns"
            :key="index"
            v-bind="column"
            :width="index < 2 ? 250 : ''"
            :fixed="index < 2"
          >
            <template v-if="false && needWrapUnit(column.label)" #header>
              <div class="wrap-unit-in-thead-name">{{ wrapUnit(column.label).name }}</div>
              <div class="wrap-unit-in-thead-unit">{{ wrapUnit(column.label).unit }}</div>
            </template>
            <template v-if="column.prop === 'industryName'" #default="{ row }">
              <el-link
                :underline="false"
                type="primary"
                @click="
                  navigateToEnterpriseAnalysis({ industryCode: row.industryCode }, 'industryCode')
                "
              >
                {{ row.industryName }}
              </el-link>
            </template>
            <template v-else-if="column.prop === 'enterpriseName'" #default="{ row }">
              <el-link
                :underline="false"
                type="primary"
                @click="
                  navigateToEnterpriseAnalysis(row, 'enterpriseCode')
                "
              >
                {{ row.enterpriseName }}
              </el-link>
            </template>
            <template v-if="column.children">
              <el-table-column
                v-for="(child, cindex) in column.children"
                :key="cindex"
                v-bind="child"
              >
                <template v-if="false && needWrapUnit(child.label)" #header>
                  <div class="wrap-unit-in-thead-name">{{ wrapUnit(child.label).name }}</div>
                  <div class="wrap-unit-in-thead-unit">{{ wrapUnit(child.label).unit }}</div>
                </template>
                <template v-if="child.children">
                  <el-table-column
                    v-for="(cchild, ccindex) in child.children"
                    :key="ccindex"
                    v-bind="cchild"
                    :minWidth="120"
                  >
                    <template v-if="false && needWrapUnit(cchild.label)" #header>
                      <div class="wrap-unit-in-thead-name">{{ wrapUnit(cchild.label).name }}</div>
                      <div class="wrap-unit-in-thead-unit">{{ wrapUnit(cchild.label).unit }}</div>
                    </template>
                  </el-table-column>
                </template>
              </el-table-column>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import AreaPicker from '@/components/area-picker';
import YearMonthPicker, { getTimeTypeFromTime } from '@/components/year-month-picker';
import Navigate2enterpriseAnalysis from '@/mixins/navigate2enterpriseAnalysis';
import MixinWrapUnitInThead from '@/mixins/wrap-unit-in-thead';

import { getComprehensiveReport } from '@/api/energy';
import { defaultNumber, isWebkit } from '@/utils';

export default {
  name: 'energy-efficiency-analysis-comprehensive',
  components: {
    AreaPicker,
    YearMonthPicker,
  },
  mixins: [Navigate2enterpriseAnalysis, MixinWrapUnitInThead],
  data() {
    return {
      keyword: '',
      time: '',
      area: '',
      loading: false,
      lists: [],
      columns: [],
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.user.theme;
    },
    qs() {
      return {
        keyword: this.keyword || undefined,
        time: this.time,
        timeType: getTimeTypeFromTime(this.time),
        areaCode: this.area || undefined,
      };
    }
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    async getTableData () {
      this.loading = true;
      try {
        const { data } = await getComprehensiveReport(this.qs);
        this.columns = data.thead || [];

        const keys = ['industryCode', 'industryName', 'districtCode', 'districtName', 'enterpriseCode', 'enterpriseName', 'enterpriseId'];
        (data.tbody || []).forEach(item => {
          Object.keys(item).forEach(key => {
            if (!keys.includes(key)) {
              item[key] = defaultNumber(item[key]);
            }
          })
        });
        this.lists = data.tbody || [];
      } catch (e) {
        console.warn(e);
      } finally {
        this.loading = false;
      }
      this.$nextTick(() => {
        console.log(this.$refs.table.layout.gutterWidth, isWebkit())
        if (isWebkit()) {
          this.$refs.table.layout.gutterWidth = 14
        }
        this.$refs.table.doLayout();
      })
    },
    clickSearch() {
      this.getTableData();
    },
  }
};
</script>
